import React from "react";
import CardItem from "@/pages/radar/Events/DataView/cardview/CardItem";
import TitleSpan from "@/components/TitleSpan";
import moment from "moment";
import './index.scss'

interface DataViewProps {
  item: any;
  editable: boolean;
}

const CardItemDescribe: React.FC<DataViewProps> = (props) => {

  const rendeDescibe = (item: any) => {
    const html = [];
    let i = 0;
    html.push(
      <div key={item.id + i++} className="descItem">
        <span>事件类型：</span>
        <TitleSpan>{item.displayName}</TitleSpan>
        <span className="mediaStatusClass"/>
      </div>
    );
    html.push(
      <div key={item.id + i++} className="descItem">
        <span>摄像头：</span>
        <TitleSpan>{item.cameraName}</TitleSpan>
      </div>
    );
    html.push(
      <div key={item.id + i++} className="descItem">
        <span>事件时间：</span>
        <TitleSpan>
          {item.updatedAt}
          {/*{moment(item.eventTime).format("YYYY.MM.DD HH:mm:ss")}*/}
        </TitleSpan>
      </div>
    );
    html.push(
      <div key={item.id + i++} className="descItem">
        <span>车牌号：</span>
        <TitleSpan>{item.plateNumber}</TitleSpan>
      </div>
    );
    return html;
  }

  return (
    <CardItem data={props.item} editable={props.editable}>
      {rendeDescibe(props.item)}
    </CardItem>
  )
}

export default CardItemDescribe;
